<template>
  <div class="template_add">
    <van-tabs
      @click="onTabsClick"
      class="cont-tab"
      v-model="activeName"
      line-width="35"
      line-height="2"
      title-active-color="#d80a06"
      title-inactive-color="#333333"
      border
      swipeable>
      <van-tab title="公共模板" name="1"></van-tab>
      <van-tab title="个人模板" name="2"></van-tab>
    </van-tabs>
    <van-list class="list_con_main" v-model="loading" :finished="finished" finished-text="没有更多了" @load="getPage">
      <div v-if="tableList.length">
        <div
          class="template_one"
          :class="{ is_select: item.check }"
          v-for="(item, index) in tableList"
          :key="item.id"
          @click="btnClicks(item, index)">
          <div class="template_one_text">
            <div>
              <van-radio v-model="item.check" :name="index + 1" icon-size="15px"></van-radio>
              <!-- <van-checkbox v-model="item.check" :name="index + 1" icon-size="15px" shape="square"></van-checkbox> -->
            </div>
            <div class="template_one_r">
              <div class="one_top" v-if="item.workTag || item.workClassifyName">
                <span v-if="item.workTag">{{ item.workTag }}</span>
                <span>{{ item.workClassifyName }}</span>
              </div>
              <div class="one_bottom">
                <span>{{ item.workContent }}</span>
              </div>
            </div>
          </div>
          <span class="icon_delete" @click.stop="delTemplate(item)" v-if="activeName == '2'">
            <van-icon name="cross" />
          </span>
        </div>
      </div>
      <van-empty v-if="tableList.length == 0" description="暂无数据" />
    </van-list>
    <div class="fead_boot">
      <div class="btn_li" @click="cancelTemplate">取 消</div>
      <div v-if="tableList.length" class="btn_li" @click="setData()">确 定</div>
    </div>
  </div>
</template>

<script>
import { queryNoteTemplateList, delNoteTemplateInfo } from '@api/api-documentary.js'
export default {
  components: {},
  data() {
    return {
      activeName: '1',
      tableList: [],
      tablePage: {
        currentPage: 1,
        pageSize: 5,
        totalResult: 0,
      },
      loading: false,
      finished: false,
      selectOne: {},
      idList: [],
      chooseTable: [],
    }
  },
  created() {},
  mounted() {},
  methods: {
    getPage() {
      this.loading = true
      this.finished = false
      queryNoteTemplateList({
        current: this.tablePage.currentPage,
        size: this.tablePage.pageSize,
        belongId: this.activeName == '1' ? '' : localStorage.userId,
        keywords: '',
        templateType: this.activeName,
      }).then(res => {
        this.tableList.push(...res.data.records)
        for (let i in this.tableList) {
          this.$set(this.tableList[i], 'check', '')
        }
        this.tablePage.totalResult = res.data.total
        this.tablePage.currentPage++
        this.loading = false
        if (this.tableList.length === this.tablePage.totalResult) {
          this.finished = true
        }
      })
    },
    onTabsClick() {
      this.tablePage.currentPage = 1
      this.tableList = []
      this.getPage()
    },
    //删除
    delTemplate(row) {
      this.$dialog
        .confirm({
          message: '确定删除该模板吗？',
        })
        .then(() => {
          delNoteTemplateInfo({
            id: row.id,
          }).then(res => {
            if (res.code == 0) {
              this.$toast.success('删除成功')
              this.tablePage.currentPage = 1
              this.tableList = []
              this.getPage()
            } else {
              this.$dialog
                .alert({
                  message: res.message,
                })
                .then(() => {})
            }
          })
        })
    },

    btnClicks(item, index) {
      for (let i in this.tableList) {
        this.$set(this.tableList[i], 'check', '')
      }
      item.check = index + 1
      this.selectOne = item
    },

    cancelTemplate() {
      this.$emit('cancelTemplate', true)
    },
    //确认
    setData() {
      this.$emit('templateBtn', this.selectOne)
      // this.$emit('templateBtn', this.chooseTable)
    },
    btnClicksCheck(item, index) {
      if (this.idList.length > 0) {
        let check = false
        for (let i = 0; i < this.idList.length; i++) {
          if (this.idList[i] == item.id) {
            check = true
            this.idList.splice(i, 1)
            this.chooseTable.splice(i, 1)
            this.$set(this.tableList[index], 'check', false)
            return
          }
        }
        if (!check) {
          this.$set(this.tableList[index], 'check', true)
          this.idList.push(item.id)
          this.chooseTable.push(item)
        }
      } else {
        this.idList.push(item.id)
        this.chooseTable.push(item)
        this.$set(this.tableList[index], 'check', true)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.template_add {
  height: 65vh;
  font-size: 13px;
  // .cont-tab{
  //   height: 75px;
  // }
  .list_con_main {
    position: relative;
    height: calc(65vh - 185px);
    margin-top: 5px;
    overflow-y: auto;
    padding: 0 16px;
    .is_select {
      border: 1px solid #ee0a24 !important;
      /deep/.van-radio__icon--checked .van-icon {
        background-color: #ee0a24;
        border-color: #ee0a24;
      }
      /deep/.van-checkbox__icon--checked .van-icon {
        background-color: #ee0a24;
        border-color: #ee0a24;
      }
    }
    .template_one {
      background-color: #fff8ed;
      padding: 8px;
      margin-bottom: 5px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border: 1px solid #fff8ed;
      .template_one_text {
        display: flex;
        align-items: center;
      }
      .template_one_r {
        margin-left: 8px;
      }
      .one_top {
        margin-bottom: 5px;
        span {
          margin-right: 15px;
        }
      }
      .icon_delete {
        color: #ee0a24;
        padding: 0 8px;
        font-size: 14px;
      }
    }
  }
}
</style>
